<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>空中课堂列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<style>
			html, body {
				background-color: white;
				overflow: hidden;
			}
			.cellBottom {
				margin-bottom: 20px;
			}
			.mui-table-view-cell:after {
				height: 0px;
			}
			.mui-table-view .mui-table-view-cell {
				color: black;
			}
			.mui-table-view-cell {
				margin: 0px;
				padding: 0px;
				margin-bottom: 3px;
			}
			.iconSet {
				position: absolute;
				width: 30px;
				height: 30px;
				border-radius: 15px;
				left: 20px;
				top: 20px;
			}
			.titleSet {
				color: #7D7D7D;
				font-size: 14px;
				position: absolute;
				width: 150px;
				height: 30px;
				line-height: 30px;
				vertical-align: middle;
				/* background-color: yellow; */
				left: 57px;
				top: 20px;
			}
			.dataSet {
				color: #AAAAAA;
				position: absolute;
				width: 100px;
				height: 30px;
				line-height: 30px;
				vertical-align: middle;
				right: 20px;
				top: 20px;
				font-size: 12px;
				/* background-color: yellow; */
				text-align: right;
			}
			.imgBgDivSet {
				margin-top: 60px;
				width: 100%;
				/*height: 180px;*/
				height: 50vw;
				padding-left: 20px;
				padding-right: 20px;
				margin-bottom: 0px;
				position: relative;
				/*border: 1px solid white;*/
			}
			.imgBgSet {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			.blueBackground {
				background-color: #29B5EA;
			}
			.grayBackground {
				background-color: #999999;
			}
			.redBackground {
				background-color: #F63E42;
			}
			.liveState {
				color: white;
				width: 60px;
				height: 23px;
				line-height: 23px;
				font-size: 14px;
				position: absolute;
				right: 30px;
				top: 70px;
				vertical-align: middle;
				text-align: center;
				border-radius: 3px;
			}
			.numDescription {
				color: white;
				background-color: black;
				filter: alpha(Opacity=60);
				-moz-opacity: 0.4;
				opacity: 0.4;
				position: absolute;
				left: 75px;
				bottom: 45px;
				width: 85px;
				height: 23px;
				line-height: 23px;
				vertical-align: middle;
				text-align: center;
				font-size: 12px;
				border-radius: 2px;
			}
			.titleDescription {
				color: white;
				background-color: rgba(0,0,0,0.5);
				/* opacity: 0.6; */
				position: absolute;
				left: 1px;
				right: 1px;
				bottom: 1px; /*  以后添加在线人数,需要变的变大 */
				height: 25px;
				line-height: 25px;
				vertical-align: middle;
				text-align: left;
				font-size: 14px;
				border-radius: 0px 0px 5px 5px;
				padding-left: 5px;
				padding-right: 5px;
				margin-left: 20px;
				margin-right: 20px;
			}
			.margin {
				margin-top: 20px;
				height: 8px;
				width: 100%;
				background-color: #f3f5f7;
			}
			.mui-table-view-cell:active {
				color: #fff;
				background-color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div  class="main">
			<ul id="main" class="mui-table-view" >
				<!-- <li class="mui-table-view-cell cellBottom" onclick="jumpToLiveStream2(0)">
				<img class="iconSet" src="../../image/icon_teacher_normal.png" alt="">
				<span class="titleSet">仓储物流运作</span>
				<span class="dataSet">2017/09/03</span>
				<div class="imgBgDivSet">
				<img class="imgBgSet" src="../../image/567.png" alt="">
				</div>
				<span class="liveState blueBackground">直播中</span>
				<span class="titleDescription">仓储物流运作是一项以物流运作为主题的一项流程,所指...</span>
				</li>
				<div class="margin"></div>
				<li class="mui-table-view-cell cellBottom" onclick="jumpToLiveStream2(1)">
				<img class="iconSet" src="../../image/icon_teacher_normal.png" alt="">
				<span class="titleSet">货运代理(初级)</span>
				<span class="dataSet">2017/08/29</span>
				<div class="imgBgDivSet">
				<img class="imgBgSet" src="../../image/567.png" alt="">
				</div>
				<span class="liveState grayBackground">已结束</span>
				<span class="titleDescription">仓储物流运作是一项以物流运作为主题的一项流程,所指...</span>
				</li>
				<div class="margin"></div>
				<li class="mui-table-view-cell cellBottom" onclick="jumpToLiveStream2(2)">
				<img class="iconSet" src="../../image/icon_teacher_normal.png" alt="">
				<span class="titleSet">货运代理(高级)</span>
				<span class="dataSet">2017/10/09</span>
				<div class="imgBgDivSet">
				<img class="imgBgSet" src="../../image/567.png" alt="">
				</div>
				<span class="liveState redBackground">预告</span>
				<span class="titleDescription">仓储物流运作是一项以物流运作为主题的一项流程,所指...</span>
				</li>-->
				<!--<div class="margin"></div>-->
			</ul>
		</div>
		<div class="noSign"   id="noData"  hidden="hidden">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure"  id="noNet" hidden="hidden">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="RefreshData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript">
		var page = 1;
		var row = 10;
		var dataSource = [];
		//总展示的数据
		var refreshCount = 0;
		//刷新条数
		apiready = function() {
		    sendBuriedNotifi('0', '空中课堂列表页', '173');
			setRefreshHeader();
			setPullUpRefresh();
			loadNewData();
		};
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				uname : $api.getStorage('cfnetppusername'),
			}
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo,
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}

		//加载最新数据
		function loadNewData() {
			page = 1;
			dataSource = [];
			get_data();
		}

		//加载更多数据
		function loadMoreData() {
			page++;
			get_data();
		}

		//加载失败点击了刷新按钮
		function RefreshData() {
			$('#noNet').hide();
			//加载最新数据
			loadNewData();
		}

		function get_data() {
			/*显示提示框*/
			showProgress();
			var params = {
				jid : $api.getStorage('cfnetppjxid'),
				uid : $api.getStorage("cfnetppuid"),
				page : page,
				rows : row,
			};
			console.log(url_getBroadcast+'\n'+JSON.stringify(params));
			cfnetppPOST(url_getBroadcast, params, true, function(data, status) {
				api.hideProgress();
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					$('#noData').hide();
					$('#noNet').hide();
					$('#main').show();
					if (data.code == 200) {
						var get_data = data.data;
						refreshCount = get_data.length;
						if (get_data != '' && get_data.constructor == Array && get_data.length > 0) {
							initFrame(get_data, refreshCount);
							for (var i = 0; i < get_data.length; i++) {
								dataSource.push(get_data[i]);
							}
						} else {
							if (page == 1) {
								$('#noData').show();
								$('#noNet').hide();
							}
						}
					} else {
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
						}
					}
				} else {
					$('#noNet').show();
					$('#main').hide();
					$('#noData').hide();
				}
			});
		}

		/*请求数据*/
		function initFrame(data, lenght) {
			// alert(JSON.stringify(data));
			var str = "";
			var currentTime = Math.round(new Date() / 1000);
			/*当前时间戳*/
			for (var i = 0; i < data.length; i++) {
				var item = data[i];
				var index = dataSource.length + i;
				var time = "";
				var state = "";
				var introduce = "";
				var id = 0;
				var starttime = "";
				starttime = getLocalTime(item.starttime);
				if (parseInt(item.starttime) >= parseInt(currentTime)) {// 还没开始
					state = '<span class="liveState redBackground">预告 </span>';
					introduce = '<span class="numDescription">时间: ' + starttime + '</span>';
					id = 1;
				} else {
					if (item.endtime == null || item.endtime >= currentTime) {//还没结束 进行中
						state = '<span class="liveState blueBackground">直播中</span>';
						id = 2;
					} else {//已经结束
						state = '<span class="liveState grayBackground">已结束</span>';
						id = 3;
					}
					introduce = '<span class="numDescription">演讲人:' + item.speak + '</span>';
				}
				str += '<li class="mui-table-view-cell cellBottom" onclick="jumpToLiveStream(' + id + ',' + index + ')">' + '<img class="iconSet" src="' + IconIsNull() + '" alt="">' + '<span class="titleSet">' + item.cname + '</span>' + '<span class="dataSet">' + starttime + '</span>' + '<div class="imgBgDivSet">' + '<img class="imgBgSet" src="' + ImgIsNull(item.img) + '" alt="">' + '</div>' + state + '<span class="titleDescription">' + item.introduce + '</span>' + '</li>' + '<div class="margin"></div>';
				// alert(item.cname);
			}
			// alert(str);
			if (page == 1) {
				$('#main').html(str);
			} else {
				$('#main').append(str);
			}
			$('#main').show();
		}

		function jumpToLiveStream(id, index) {
		 sendBuriedNotifi('1', '空中课堂列表页', '173');
			var url = dataSource[index].url;
			var introdecu = dataSource[index].introduce;
			var title = dataSource[index].cname;
			var state = id;
			if (url.indexOf("http") != -1) {//
				if (state == 1) {//预告展示介绍
					api.openWin({useWKWebView:true,
						name : 'liveStreamDescription',
						url : 'liveStreamDescription.html',
						pageParam : {
							content : introdecu,
							title : title,
							ctitle : '空中课堂列表详情页',
							sourceurl : window.location.pathname,
							sourcetitle : document.title,
						}
					});
				}
				if (state == 2) {//直播中
					var pageParam = {
						url : url,
						shareurl :url,
						title : title,
						ctitle : '空中课堂列表详情页',
						sourceurl : window.location.pathname,
						sourcetitle : document.title,
					}
					api.openWin({useWKWebView:true,
						name : 'indexLunDetailsWindow',
						url : '../../html/HomePage/indexLunDetailsWindow.html',
						pageParam : pageParam
					});
				}
				if (state == 3) {//已结束 预告介绍
					var pageParam = {
						url : url,
						shareurl :url,
						title : title,
						ctitle : '空中课堂列表详情页',
						sourceurl : window.location.pathname,
						sourcetitle : document.title,
					};
					api.openWin({useWKWebView:true,
						name : 'indexLunDetailsWindow',
						url : '../../html/HomePage/indexLunDetailsWindow.html',
						pageParam : pageParam
					});
				}
			} else {
				api.openWin({useWKWebView:true,
					name : 'liveStreamDescription',
					url : 'liveStreamDescription.html',
					pageParam : {
						content : introdecu,
						title : title,
						ctitle : '空中课堂列表详情页',
						sourceurl : window.location.pathname,
						sourcetitle : document.title,
					}
				});
			}
		}

		//判断头像是否为空
		function IconIsNull(picurl) {
			var purl = "";
			if (picurl != '' && picurl != null) {
				if (picurl.indexOf("http") != -1) {//包含
					purl = picurl;
				} else {
					purl = $api.trimAll('http://cfnet.org.cn' + picurl);
				}
			} else {
				purl = "../../image/icon_teacher_normal.png";
			}
			return purl;
		}

		//判断背景图是否为空
		function ImgIsNull(picurl) {
			var purl = "";
			if (picurl != '' && picurl != null) {
				if (picurl.indexOf("http") != -1) {//包含
					purl = picurl;
				} else {
					purl = $api.trimAll('http://cfnet.org.cn' + picurl);
				}
			} else {
				purl = "../../image/course_placehoder.png";
			}
			return purl;
		}

		function timeString(timeStamp) {
			if (timeStamp == '' || timeStamp == null) {
				return '';
			}
			var timeDate = new Date(timeStamp * 1000);
			var month = timeDate.getMonth() + 1;
			;
			var day = timeDate.getDate();
			var hour = timeDate.getHours();
			var minutes = timeDate.getMinutes();
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			if (hour < 10) {
				hour = '0' + hour;
			}
			if (minutes < 10) {
				minutes = '0' + minutes;
			}
			return month + '-' + day + ' ' + hour + ':' + minutes;
		}

		function LimitNumber(txt, idName) {
			var str = txt;
			str = str.substr(0, 20) + '...';
			var id = document.getElementById(idName);
			id.innerText = str;
		}
	</script>
</html>